<template>
  <div>
    <!-- 给h1起了个名字叫h1 -->
    <h1 ref="zz">我是app.vue</h1>
    <button @click="msg='hello'">修改msg</button>
    <p>{{ msg }}</p>
    <button @click="fn">快速的父传子</button>

    <!-- 组件，还想找到组件对象 -->
    <son ref="son" />

    <div class="box">
      <button v-if="btnShow" @click="fn2">登录</button>
      <input v-else ref="txt" type="text" placeholder="请输入账号" />
    </div>
  </div>
</template>

<script>
import son from "./components/son";
export default {
  components: {
    son,
  },

  data() {
    return {
      btnShow: true,
      msg: '你好'
    };
  },

  methods: {
    fn() {
      this.$refs.son.sonName = "为父给你起个名";
    },

    async fn2() {
      // 显示出文本框,dom渲染是异步的
      // 所以你下面这句代码仅仅只是改变了数据，但是dom还没重新渲染
      this.btnShow = false;

      // 找到文本框，给它获得焦点 `focus()`
      // console.log(this.$refs.txt)
      // this.$refs.txt.focus()

      // // $nextTick就是一个回调函数，这个回调函数会在下次dom更新后调用
      // this.$nextTick( () => {
      //   // 这个回调函数会在下一次dom更新后调用
      //   console.log(this.$refs.txt)
      //   this.$refs.txt.focus()
      // })

      // $nextTick是基于promise封装的
      // this.$nextTick()
      // .then( () => {
      //   this.$refs.txt.focus()
      // } )
      await this.$nextTick()
      // 这里的代码一定相当于就是写到.then的代码
      // 换句话说，这里执行的时候就代表下次dom已经更新完了
      this.$refs.txt.focus()
    },
  },

  // updated() {
  // 不要用它，因为任意数据改变都会触发
  //   console.log(this.$refs.txt);
  //   this.$refs.txt.focus();
  // },

  // mounted () {

  //   // console.log(document.querySelector('h1'))

  //   // 建议用这种：
  //   console.log( this.$refs.zz )
  //   console.log( this.$refs.son )
  // }
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: #f00;
}
</style>